<template>
  <div class="app-container">
    <split-pane :default-percent="20" split="vertical">
      <template slot="paneL">
        <div class="table">
          <div class="inner" ref="inner">
            <el-table
              highlight-current-row
              :height="maxHeight"
              :data="tableData"
              class="leftComp"
              @row-click="getCurrentRow"
            >
              <el-table-column show-overflow-tooltip prop="rleName" label="角色名称"></el-table-column>
            </el-table>
          </div>
        </div>
      </template>
      <template slot="paneR">
        <div class="table">
          <div class="inner" ref="inner">
            <el-row>
              <el-col :span="24">
                <buttonName @clickEvent="clickEvent" style="margin-left:2rem;"></buttonName>
                <!--                <el-button-->
                <!--                  style="margin-left:2rem;"-->
                <!--                  type="primary"-->
                <!--                  size="mini"-->
                <!--                  @click="saveAuthBtn"-->
                <!--                  v-if="isAuth('supplierSettingsAdd')"-->
                <!--                >保存权限-->
                <!--                </el-button>-->
              </el-col>
            </el-row>
            <div class="tree" :style="{height: (maxHeight - 30) + 'px'}">
              <el-tree
                style="min-height:30rem;"
                :data="menuData"
                ref="tree"
                show-checkbox
                default-expand-all
                :expand-on-click-node="false"
                node-key="mdlId"
                @check-change="checkChange"
                :props="defaultProps"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ data.mdlName }}</span>
                  <span class="menu">
                    <el-checkbox
                      v-for="item in data.moduleChildrenGrand"
                      :key="item.mdlId"
                      v-model="item.checked"
                      :checked="item.checked === $Y"
                      :disabled="data.checked === $N"
                      :true-label="$Y"
                      :false-label="$N"
                    >{{ item.mdlName }}</el-checkbox>
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script>
// import { concat } from '@/utils/utils'
import isAuth from '@/mixins/buttonAuth'
import {getAuthList, getAuthMenu, saveAuth} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import buttonName from '@/components/buttonName/button-name'

export default {
  name: 'router.auth',
  mixins: [resizeMixin, isAuth],
  data() {
    return {
      maxHeight: -1,
      defaultProps: {
        children: 'moduleChildren',
        label: 'mdlName'
      },
      tableData: [],
      menuData: [],
      currentRow: ''
    }
  },
  components: {buttonName},
  mounted() {
    this.getList()
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  methods: {
    clickEvent(val) {
      if (val.mdlCode === 'supplierSettingsAdd') {
        this.saveAuthBtn()
      }
    },
    // 获取左侧角色列表
    getList() {
      getAuthList({
        rleCUuid: 'G'
      }).then(response => {
        console.log('执行了 ')
        // if (response.success == 1) {
        this.tableData = response.data
        // }
        // else {
        //   if (response.msg) {
        //     this.$message.error(response.msg);
        //   } else {
        //     this.$message.error("获取角色列表失败");
        //   }
        // }
      })
      // .catch(() => {
      //   this.$message.error("获取角色列表失败");
      // });
    },
    // 修改节点的选中状态时调用的事件，传入当前 节点的数据（node）以及是否选中（isChecked）
    checkChange(node, isChecked) {
      if (isChecked) {
        node.checked = this.$Y
      } else {
        node.checked = this.$N
      }
      if (node.moduleChildrenGrand && node.moduleChildrenGrand.length > 0) {
        node.moduleChildrenGrand.forEach(item => {
          if (!isChecked) {
            item.checked = this.$N
          }
        })
      }
    },

    // 获取当前行，得到当前行的权限数据
    getCurrentRow(row) {
      this.currentRow = row
      this.menuData = []
      this.getRightList()
    },
    // 获取右侧列表
    getRightList() {
      console.log(this.currentRow)
      getAuthMenu({
        ROLE_UUID: this.currentRow.uuid,
        rleCUuid: this.currentRow.rleCUuid
      }).then(response => {
        if (response.success == 1) {
          let data = response.data
          this.menuData = data
          var _this = this
          setTimeout(function () {
            _this.getCheckedList()
          }, 30)
        }
      })
    },
    // 获取接口数据中checked的数组，组成数组，赋值给tree
    getCheckedList() {
      // 初始化被勾选的节点
      let checkedNodes = []
      this.menuData.forEach(firstClass => {
        firstClass.moduleChildren.forEach(secondClass => {
          if (secondClass.checked === this.$Y) {
            checkedNodes.push(secondClass)
          }
        })
      })
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes(checkedNodes)
      })
    },
    // 保存权限操作
    saveAuthBtn() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择角色名称', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      const checkedNodes = this.$refs.tree.getCheckedNodes(false, true)
      let checkedMenus = []
      checkedNodes.forEach(item => {
        checkedMenus.push(
          item.mdlId
          // {
          // mdlId: String(item.mdlId)
          // }
        )
        if (item.moduleChildrenGrand && item.moduleChildrenGrand.length > 0) {
          item.moduleChildrenGrand.forEach(item => {
            if (item.checked === this.$Y) {
              checkedMenus.push(
                item.mdlId
                // {
                // mdlId: String(item.mdlId)
                // }
              )
            }
          })
        }
      })
      saveAuth({
        ROLE_UUID: this.currentRow.uuid,
        MENU: checkedMenus
      }).then(res => {
        if (res.success == 1) {
          this.$message({
            type: 'success',
            showClose: true,
            message: '保存权限成功!'
          })
          this.menuData = []
          this.getRightList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container {
    padding: 1.5rem;
    height: 100%;
  }

  .tree {
    overflow-y: auto;
    padding: 15px 0;
    box-sizing: border-box;
  }

  .custom-tree-node {
    display: flex;
    align-items: center;
    width: 100%;

    span:first-child {
      display: inline-block;
      width: 200px;
      vertical-align: middle;
    }

    .menu {
      width: 70%;
      display: inline-block;
      overflow: hidden;
      white-space: pre-wrap;
      word-break: break-all;

      label {
        margin: 0 15px 5px 0;
        display: inline-block;
      }
    }
  }

  .table {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 100%;

    .inner {
      width: 100%;
      height: 100%;
      overflow-y: hidden;
      overflow-x: auto;
    }
  }

  ::v-deep .el-tree-node__content {
    height: auto;
  }
</style>

